<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

    4.1移动端主流方案

        1.单独制作移动端页面（主流)
        
            京东商城手机版

            淘宝触屏版

            苏宁易购手机版

        ⒉.响应式页面兼容移动端（其次)
        
            三星手机官网

    4.2单独移动端页面（主流)

        通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面.

    4.3响应式兼容PC移动端

        三星电子官网:www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端。

        缺点∶制作麻烦，需要花很大精力去调兼容性问题

    4.4总结

        现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案
        
        现在市场主流的选择还是单独制作移动端页面

    
    5.1移动端浏览器

        移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。
        
        我们可以放心使用H5标签和CSS3样式。

        同时我们浏览器的私有前缀我们只需要考虑添加webkit即可


    5.2 CSS初始化normalize.css

        移动端CSS初始化推荐使用normalize.css/
        Normalize.css:保护了有价值的默认值
        Normalize.css:修复了浏览器的bug
        Normalize.css :是模块化的
        Normalize.css:拥有详细的文档
        官网地址: http://necolas.github.io/normalize.css/


    5.3 CSS3盒子模型box-sizing

        传统模式宽度计算:盒子的宽度=CSS中设置的width + border + padding
        CSS3盒子模型:盒子的宽度=CSS中设置的宽度width里面包含了border和 padding
        也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了


    传统 or CSS3盒子模型?

        移动端可以全部CSS3盒子模型
        PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

    5.4 特殊样式

        /*css3盒子模型*/
        box-sizing: border-box;
        -webkit-box-sizing: border-box;

        /*点击高亮我们需要清除清除设置为transparent完成透明*/
        -webkit-tap-highlight-color: transparent;

        /*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
        -webkit-appearance: none;

        /*禁用长按页面时的弹出菜单*/
        img,a { -webkit-touch-callout: none; }

     -->
</body>
</html>